<template>
	<view :style="{width: props.width}" class="change-btn" @tap="showPopup">
		换个字体
	</view>
	<u-popup v-model="show" mode="bottom" safe-area-inset-bottom close-icon :mask-close-able="false"
		border-radius="8">
		<view class="content">
			<view class="title">字体选择</view>
			<scroll-view class="font-picker" scroll-x="true" enable-flex v-if="fonts.length">
				<view class="picker-item-container">
					<view
						v-for="(font, index) in fonts"
						:class="`font-item ${font.font === currentFont ? 'acitve' : ''}`"
						:key="index"
						@click="selectFont(font.font)"
						:style="`font-family: ${font.font};`"
					>
							{{font.name}}
						</view>
				</view>
			</scroll-view>
			<view class="" v-if="!fonts.length">
				正在努力开发中...
			</view>
			<view class="btns">
				<view class="confirm" @click="confirm">选中</view>
				<view class="confirm" @click="close">取消</view>
			</view>
		</view>
	</u-popup>
</template>

<script lang="ts" setup>
	import { ref, defineEmits, defineProps } from "vue";
	
	const vk = uni.vk;
	/** 初始化字体
	 * @param {string[]} fonts 字体名称列表
	 */
	const initFontFamily = (fonts: string[]) => {
		const loadedFonts = vk.getVuex('$app.fonts');
		console.log('loadedFonts', loadedFonts);
		// const loadedFonts = [];
		// #ifdef MP-WEIXIN
		fonts.forEach((font) => {
			if (!loadedFonts.includes(font)) {
				uni.loadFontFace({
					global: true,
					family: font,
					// source: `url("${__wxConfig.envVersion === 'develop' ? 'https://mp-6311ccac-218f-4072-bf34-9cd284ea3029.cdn.bspapp.com' : 'https://mp-f94b3c95-ea57-45eb-aad5-8365caef5925.cdn.bspapp.com'}/avatar-client/font/${font}.ttf")`,
					source: `url("https://mp-6311ccac-218f-4072-bf34-9cd284ea3029.cdn.bspapp.com/avatar-client/font/${font}.ttf")`,
					success: () => {
						console.log(`加载字体${font}成功`);
						vk.vuex.set('$app.fonts', [...loadedFonts, font]);
					},
					fail(e) {
						console.log('加载字体失败', e, `"https://mp-6311ccac-218f-4072-bf34-9cd284ea3029.cdn.bspapp.com/avatar-client/font/${font}.ttf"`);
					},
					scopes: ["webview", "native"],
				})
			}
		})
		// #endif
	}

	const emit = defineEmits(["update:modelValue"]);
	const props = defineProps({
		modelValue: {
			type: String,
			default: ref('heart')
		},
		fonts: {
			type: Array,
			default: [
				{
					font: 'duck',
					name: '小黄鸭'
				},
				{
					font: 'qinzi',
					name: '可爱'
				}
			]
		},
		width: {
			type: String,
			default: '320rpx'
		}
	})

	const show = ref(false);

	const showPopup = () => {
		initFontFamily(props.fonts.map(i => i.font));
		show.value = true;
	}

	const currentFont = ref(props.modelValue);

	const close = () => {
		show.value = false;
	}

	const confirm = () => {
		emit('update:modelValue', currentFont.value);
		close();
	}

	let selectFont = (font : string) => {
		currentFont.value = font;
	}
</script>

<style scoped lang="scss">
	.change-btn {
		width: 320rpx;
		font-size: 24rpx;
		padding: 18rpx 0;
		text-align: center;
		color: #ffffff;
		background: #70b9fd;
		opacity: 0.8;
		border-radius: 6px;
		box-shadow: 1px 1px 4px 1px #dddddd;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
	}

	::v-deep .u-mask-show {
		opacity: 0 !important;
	}

	.title {
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
	}

	.btns {
		display: flex;
		margin-top: 10rpx;
		border-top: 1px solid #f1f1f1;

		:first-child {
			border-right: 1px solid #f1f1f1;
		}
	}

	.confirm {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.font-picker {
		display: flex;
		flex-direction: row;
		height: 250rpx;
		align-items: center;

		.picker-item-container {
			display: flex;
			flex-direction: row;
			height: 150rpx;
			align-items: center;
		}

		.font-item {
			margin: 0 5rpx;
			height: 60rpx;
			width: 160rpx;
			background-color: #ffffff;
			position: relative;
			font-size: 20rpx;
			z-index: 1;
			line-height: 60rpx;
			display: flex;
			justify-content: center;

			::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 138rpx;
				height: 138rpx;
				border: 1px solid #f1f1f1;
				transform: scale(0.5);
				transform-origin: 0 0;
			}
		}

		.acitve {
			transform: scale(1.5);
			position: relative;
			z-index: 2;
			box-shadow: 0px 0px 2px 2px #ffca6b;
			margin-left: 20rpx;
		}
	}
</style>